<template>
	<div style="height:3000px">
		<!-- 采购报表 -->

			<v-card>
				<v-card-title>
					<v-row class="mt-2">
						<v-col cols="12" sm="3" md="2">
							<v-menu v-model="startMenu" :close-on-content-click="false" :nudge-right="40"
								transition="scale-transition" offset-y min-width="auto">
								<template v-slot:activator="{ on, attrs }">
									<v-text-field required v-model="query.startTime" label="开始时间" readonly v-bind="attrs"
										v-on="on" dense outlined>
									</v-text-field>
								</template>
								<v-date-picker locale="zh-cn" v-model="query.startTime" @input="startMenu = false">
								</v-date-picker>
							</v-menu>
						</v-col>
						<v-col cols="12" sm="3" md="2">
							<v-menu v-model="endMenu" :close-on-content-click="false" :nudge-right="40"
								transition="scale-transition" offset-y min-width="auto">
								<template v-slot:activator="{ on, attrs }">
									<v-text-field required v-model="query.endTime" label="结束时间" readonly v-bind="attrs"
										v-on="on" dense outlined>
									</v-text-field>
								</template>
								<v-date-picker locale="zh-cn" v-model="query.endTime" @input="endMenu = false">
								</v-date-picker>
							</v-menu>
						</v-col>
						<v-col>
							<v-btn color="primary" @click="loadDataList">查询</v-btn>
							<v-btn class="ml-3" depressed color="primary" @click="refreshApps">
								刷新</v-btn>
								
						</v-col>
					</v-row>
				</v-card-title>
				<v-alert text color="blue-grey" class="text-center">
					该页统计下采购总数：<a>{{this.totalqty}}</a>件,准时率：<a>{{this.totalper}}</a>
				</v-alert>
				<div id="myChart" :style="{ height: '300px'}"></div>
				
				<v-data-table :headers="HeaderList" :items="DataList" small dense
					fixed-header item-key="id"  class="text-no-wrap" show-select  v-model="selected"
					loading-text="正在加载请稍等......" :loading="OrderLoading"
					:options.sync="OrderOptions" :footer-props="vuetifyDefaultPage"
					:server-items-length="OrderTotalCount">
				</v-data-table>
				
				
			</v-card>
			

	</div>
</template>

<script>

export default {
  name: 'wms_summary_report_in',
	mounted(){
	    this.drawLine();
	},
  data: () => ({
			query: {
				startTime: null,
				endTime: null,
			},
			totalqty:"",
			totalper:"",
  		startMenu: false,
  		endMenu: false,
  		HeaderList: [
  			{ text: '年份',value: 'year'},
  			{ text: '月份', value: 'month' },
  			{ text: '采购物料总数', value: 'qty' },
  			{ text: '交付准时率', value: 'percent' },
  		],
  		DataList: [],
			selected:[],
  		checkList: [],
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100]
			},
			OrderLoading: true,
			OrderTotalCount: 0,
			OrderOptions: {
				//页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			DialogHeader:"",
  		leftCheckMaterialValid: false,
  		//领料单 表单信息
  		leftMaterialRequestOrderModel: {},
  		leftMaterialValid: true,
  		//领料单 需要数量规则
  		rules: {
  		    required: value => !!value || '值不能为空！',
  		    counter: value => value.length <= 20 || '字符长度不能超过20!',
  				num: value => value > 0 || '值要大于0！',
  				true: value => {
  					const pattern = /^[0-9]*$/
  					return pattern.test(value) || '请输入合法数字!'
  				}
  		 },
			 chartdata:{
				 title:'',
				 xdata:[],
				 series:[],
			 }
  	}),
  
  	created() {  
			//获取单据信息
  		this.loadDataList();
  	},
		watch: {
			OrderOptions: {
				handler() {
					this.loadDataList()
				},
				deep: true
			}
		},
  	methods: {
  		//加载单据信息
  		loadDataList() {
  			var that = this;
				that.OrderLoading = true;
				that.DataList = [];
  			this.$httpRequest({
  				url: `WMS/WmsReportIn/GetBillListByPage?start=${this.query.startTime}&end=${this.query.endTime}&pageIndex=${this.OrderOptions.page}&pageSize=${this.OrderOptions.itemsPerPage}`,
  				method: 'get'
  			}).then(function(response) {
  				if (response.status == 1) {
						//console.log(response.data.data.result);
  					that.DataList = response.data.data.result;
  					that.OrderTotalCount = response.data.data.pagination.totalRecords;
						that.totalqty = response.data.totalqty;
						that.totalper = response.data.totalper;
  					that.OrderLoading = false;
						var xlist = [];
						var ylist = [];
						console.log(response.data.data.result.length);
						for(var i=0; i<response.data.data.result.length;i++)
						{
							xlist.push(response.data.data.result[i].month);
							ylist.push(response.data.data.result[i].percent.substring(0,response.data.data.result[i].percent.length-1));
						}
						that.chartdata.title = response.data.data.result[0].year + "年";
						that.chartdata.xdata = xlist.reverse();
						that.chartdata.series = ylist.reverse();
						that.drawLine();
  				} else {
  					that.$message.error(response.info);
  				}
  			})
  		},
			refreshApps(){
				this.query.startTime = null
				this.query.endTime = null
			},
			drawLine(){
			        // 基于准备好的dom，初始化echarts实例
			        let myChart = this.$echarts.init(document.getElementById('myChart'))
			        // 绘制图表
			        myChart.setOption({
			            title: { text: this.chartdata.title },
			            tooltip: {},
								  grid: {
										// 网格线配置
										show: true,
										lineStyle: {
											color: ["#e9e9e9"],
											width: 1,
											type: "solid",
										},
									},
			            xAxis: {
			                data: this.chartdata.xdata,
											name:'月份'
			            },
			            yAxis: {name:'百分比/%'},
			            series: [{
			                name: '准时率',
			                type: 'line',
			                data: this.chartdata.series
			            }]
			        });
			    }
  	}
  
  }

</script>

<style>
	$select-small-chips-dense-selections-min-height{
		height:40px;
	}
</style>
